<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>美策平台-发布货单</title>
    <link rel="icon" type="image/png" href="/img/icon.png">
    <link rel="stylesheet" type="text/css" href="../datepicker/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/app.css">
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/framework7/1.6.5/css/framework7.ios.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/framework7/1.6.5/css/framework7.ios.colors.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../js/citypicker/style.css">
    <script type="text/javascript" src="../datepicker/external/jquery/jquery.js"></script>
    <script type="text/javascript" src="/pc/js/all.js"></script>
    <link rel="stylesheet" href="/h5/css/all.css">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <style type="text/css">
        /*末尾指引*/
        #zhiyin {
            width: 100%;
            height: 40px;
            border: 0;
            line-height: 40px;
            color: #aaaaaa;
            background: #e0e0e0;
            text-align: center;
            position: fixed;
            bottom: 0;
        }

        #zhiyin button {
            padding: 5px 10px;
            background: #fff;
            border: 0;
        }

        #zhiyin .btnCurr {
            color: #fff;
            background: #0088cc;
        }
    </style>
</head>
<style>
    .picker-modal {
        position: fixed;
    }
</style>
<body style="overflow-y: auto;-webkit-overflow-scrolling: touch">
<!--
    制作者：宋帅
    页面：发布订单页面
    时间：2019年11月6日
-->


<!----------发布订单页面---------->
<div id="addOrderPage"><!--此ID页面切换用-->
    <div id="addOrderTitle">
        <b class="title">发布货单</b>
        <img src="../images/return.png" id="addOrderRtn">
    </div>
    <div style="height:1.593333rem"></div>

    <div id="addOrderDetail">
        <p class="topTitle">基本信息</p>
        <input type="hidden" value="0" id="orderID"/>
        <div class="radio">

            <div class="d1">
                货单状态：
                <label>
                    <input type="radio" name="status" checked value="2">抢单中
                </label>
                <label>
                    <input type="radio" name="status" value="1">未开始抢单
                </label>
            </div>
            <div style="" class="d1">
                抢单类型：
                <label onclick="selectIsRob(1)"><input type="radio" name="isRob" value="1" checked>抢单</label>
                &nbsp; &nbsp;
                <label onclick="selectIsRob(2)"><input type="radio" name="isRob" value="2">普通单</label>
            </div>
            <div class="d1">
                原料面料：
                <label onclick="setSubmit(0)">
                    <input type="radio" name="isFabric" checked value="0">不提供
                </label>
                &nbsp; &nbsp;
                <label onclick="setSubmit(1)">
                    <input type="radio" name="isFabric" value="1">提供
                </label>
            </div>
        </div>


        <table style="margin-top: 20px" class="table1">
            <tr>
                <td>产品名称</td>
                <td class="right">
                    <input type="text" name="name" placeholder="请输入">
                </td>
            </tr>
            <tr class="bondTr">
                <td>所需保证金</td>
                <td class="right">
                    <input type="number" name="bond" value="0" placeholder="请输入">
                </td>
            </tr>
            <tr>
                <td>款号</td>
                <td class="right">
                    <input type="text" name="styleNo" placeholder="请输入">
                </td>
            </tr>


            <tr>
                <td>款式名称</td>
                <td class="right">
                    <input type="text" name="styleName" placeholder="请输入">
                </td>
            </tr>
            <tr>
                <td>适用场合</td>
                <td class="right">
                    <input type="text" name="scence" placeholder="请输入">
                </td>
            </tr>
            <tr>
                <td>数量</td>
                <td class="right">
                    <input type="number" name="num" placeholder="请输入">
                </td>
            </tr>
            <tr>
                <td>单价</td>
                <td class="right">
                    <input type="number" name="money" placeholder="请输入">
                </td>
            </tr>

            <!--
           <tr class="bondTr">
               <td>要求工厂等级</td>
               <td class="right">
                   <select name="level" id="levelselect">
                       <option value ="0">请选择</option>
                   </select>
               </td>
           </tr>  --->




            <tr>
                <td>交货时间</td>
                <td class="right" style="position: relative;">
                    <input type="text" class="regInput"
                           name="period" placeholder="请输入"/>
                </td>
            </tr>
            <tr>
                <td>产品材质</td>
                <td class="right">
                    <input type="text" name="material" placeholder="请输入">
                </td>
            </tr>
            <tr>
                <td>工艺要求</td>
                <td class="right">
                    <input type="text" name="tech" placeholder="请输入">
                </td>
            </tr>
            <tr>
                <td>产品款式</td>
                <td class="right">
                    <input type="text" name="design" placeholder="请输入">
                </td>
            </tr>
            <tr>
                <td>产品风格</td>
                <td class="right">
                    <input type="text" name="style" placeholder="请输入">
                </td>
            </tr>
            <tr>
                <td>产品类型</td>
                <td class="right">
                    <input type="text" name="orderType" placeholder="请输入">
                </td>
            </tr>

        </table>
        <div style="height:15px"></div>
        <p class="topTitle">货单描述</p>
        <textarea name="detail" class="detail" placeholder="请输入货单描述"></textarea>

        <div style="height:15px"></div>
        <p class="topTitle">产品图片</p>
        <table class="productPicture MainDivTable">
            <tr>
                <td>主图</td>
                <td class="right upImg imgMain">
                    <div class="file">
                        <input type="file" id="file6" name="img">
                    </div>
                    <a class="deleteico"></a>
                </td>
            </tr>
        </table>
        <p class="topTitle">图集</p>
        <table class="productPicture pictureDivTable">


        </table>
        <div class="productPictureDiv buttondiv">
            <h2 class="NullPic">点击新增图片按钮,添加图片</h2>
            <a class="addPic button">新增图片</a>
        </div>

        <p class="topTitle">尺码/数量</p>
        <div id="addOrderDetail2">
        </div>


        <div style="height:15px"></div>
        <p class="topTitle">外发要求</p>
        <div class="radio">
            <div class="d1">
                <label><input type="radio" value="1" name="proType">本地生产</label>
                &nbsp; &nbsp;
                <label><input type="radio" value="2" name="proType">外地生产</label>
            </div>
            <br>
            <div class="d1">
                外发范围：
                <input type="text" placeholder="请选择城市" id="location" name="location">
            </div>
            <br>
            <div class="d1">
                生产要求：
                <label><input type="radio" value="1" name="proWay">流水做</label>
                &nbsp; &nbsp;
                <label><input type="radio" value="2" name="proWay">整件做</label>
            </div>
            <div class="d1" id="outType"></div>
            <div class="d1" id="catelist"></div>
        </div>


        <div style="height:15px"></div>
        <p class="topTitle">面辅料成分/缩率</p>
        <table class="stuff">
            <tr>
                <td>面辅料名称</td>
                <td class="right">缩率</td>
            </tr>
            <tr class="stufftd stuff1">
                <td>
                    <input type="text" placeholder="请输入面辅料名称" name="key1">
                </td>
                <td class="right">
                    <input type="text" placeholder="请输入缩率" name="value1">
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center;color:#0088cc;" class="addtuff">新增</td>
            </tr>
        </table>
        <div style="height:15px"></div>

        <div class="mianliaoDiv none">
            <p class="topTitle">面辅料单耗</p>
            <table class="deplete">
                <tr class="dapleteTr">
                    <td>名称</td>
                    <td>规格</td>
                    <td>用量</td>
                    <td>备注</td>
                </tr>
                <tr class="depletetd deplete1">
                    <td>
                        <input type="text" name="name1">
                    </td>
                    <td class="right">
                        <input type="text" name="size1">
                    </td>
                    <td>
                        <input type="text" name="num1">
                    </td>
                    <td class="right">
                        <input type="text" name="remark1">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center;color:#0088cc;" class="adddeplete">新增</td>
                </tr>
            </table>

            <div style="height:20px"></div>
        </div>


        <div class="costlistDiv">
            <p class="topTitle">成本明细表</p>
            <div id="costlist"></div>
        </div>















        <p id="addOrderSubmit">
            <button class="addOrder" data-status="0">设置订单合同</button>
            <input type="hidden" id="nextSubmit" value="0">
        </p>
        <!--末尾指引-->
        <div style="height:50px;"></div>
        <div id="zhiyin">
            <button class="btnCurr">订单资料</button>
            --
            <button>订单合同</button>
        </div>
    </div>
</div>
<!----------发布订单页面---------->


<!----------错误提示---------->
<div id="errMsg"></div>
<!----------错误提示---------->
</body>
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/indexPageChange.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script src="https://cdn.bootcss.com/framework7/1.6.5/js/framework7.min.js"></script>
<script src="../js/citypicker/regionsObject2.js"></script>
<script src="../js/citypicker/cityPicker.js"></script>
<script src="../js/alertMsg.js"></script>
<script src="../js/imgUpload.js"></script>
<script>
    var order = new MC.Order.AddOrder();
    MC.msg.showLoad();
    imgUpload2('file6', '/api/member/upload/img');
    var nums = {
        num1: 1,
        num2: 1
    };
    $('.addtuff').click(function () {
        var num1 = nums.num1;
        $('.stuff' + num1).after(
            `
            <tr class="stufftd stuff${num1 + 1}">
                <td>
                    <input type="text" placeholder="请输入面辅料名称" name="key${num1 + 1}">
                </td>
                <td class="right">
                    <input type="text" placeholder="请输入缩率" name="value${num1 + 1}">
                </td>
            </tr>
            `
        )
        nums.num1++;
    })

    $('.adddeplete').click(function () {
        var num2 = nums.num2;
        $('.deplete' + num2).after(
            `
            <tr class="depletetd deplete${num2 + 1}">
                <td>
                    <input type="text" name="name${num2 + 1}">
                </td>
                <td class="right">
                    <input type="text" name="size${num2 + 1}">
                </td>
                <td>
                    <input type="text" name="num${num2 + 1}">
                </td>
                <td class="right">
                    <input type="text" name="remark${num2 + 1}">
                </td>
            </tr>
            `
        )
        nums.num2++;
    });
    var sizelist = [];
    var colorSize = $('.NumColor tr .colorSize');
    var colorNum = $('.NumColor tr').find('.colorNum');
    for (let i = 0; i < colorSize.length; i++) {
        for (let j = 0; j < colorNum.length; j++) {
            var list = {
                color: i + 1,
                size: j + 1,
                num: ''
            }
            sizelist.push(list)
        }
    }


    $('.addOrder').click(function () {
        if ($(this).attr('data-status') != 0) {
            return false
        }
        var mthis = this;
        $(this).attr('data-status', 1);
        setTimeout(function () {
            $(mthis).attr('data-status', 0);
        }, 500);
        setOrderAdd();
    });

    /**
     * 设置订单
     * */
    function setOrderAdd() {
        var token = JSON.parse(localStorage.getItem('userInfo')).token;
        var styleNo = $("input[name='styleNo']").val();                                 // 款号
        var styleName = $("input[name='styleName']").val();                             // 款式名称
        var scence = $("input[name='scence']").val();                                   // 适用场合
        var names = $("input[name='name']").val();                                       // 产品名称
        var numss = $("input[name='num']").val();                                       // 产品数量
        var money = $("input[name='money']").val();                                       // 总金额
        //   var level = $("[name='level']").val();                                       // 等级
        var bond = $("input[name='bond']").val();
        var material = $("input[name='material']").val();                               // 产品材质
        var tech = $("input[name='tech']").val();                                       // 工艺要求
        var orderType = $("input[name='orderType']").val();                             // 产品类型
        var style = $("input[name='style']").val();                                     // 产品风格
        var design = $("input[name='design']").val();                                   // 产品款式
        var detail = $('[name=detail]').val();                                     // 货单描述
        var period = $("input[name='period']").val();                                   // 交货时间
        var proType = $('input[name = proType]:checked').val();                         // 外发要求
        var region = $('input[name = location]').val();                                 // 外发范围
        var proWay = $('input[name = proWay]:checked').val();                           // 生产要求


        var file1 = $('input[name = a]');                                               // 款式图
        var file11 = file1.val();
        var file_a = file1.next('input[type=hidden]').val();
        var file2 = $('input[name = b]')                                                // 粘衬部位
        var file12 = file2.val();
        var file_b = file2.next('input[type=hidden]').val();
        var file3 = $('input[name = c]')                                                // 背面图
        var file13 = file3.val();
        var file_c = file3.next('input[type=hidden]').val();
        var file4 = $('input[name = d]')                                                // 关键部位细节
        var file14 = file4.val();
        var file_d = file4.next('input[type=hidden]').val();
        var file5 = $('input[name = e]')                                                // 关键部位细节图
        var file15 = file5.val();
        var file_e = file5.next('input[type=hidden]').val();
        var file6 = $('input[name = img]')                                                // 主图
        var file16 = file6.val();
        var file_img = file6.next('input[type=hidden]').val();
        var stuff1 = $('.stufftd');
        var stuff = [];
        if (period == '') {
            alertMsg('请填写交货时间!')
            return false
        }
        for (let i = 0; i < stuff1.length; i++) {

            var value = stuff1.find(`input[name=value${i + 1}]`).val();
            var key = stuff1.find(`input[name=key${i + 1}]`).val();
            var list = {
                key: key,
                val: value
            }
            stuff.push(list);
        }
        var deplete1 = $('.depletetd')
        var deplete = [];
        for (let i = 0; i < deplete1.length; i++) {
            var name = deplete1.find(`input[name=name${i + 1}]`).val();
            var size = deplete1.find(`input[name=size${i + 1}]`).val();
            var num = deplete1.find(`input[name=num${i + 1}]`).val();
            var remark = deplete1.find(`input[name=remark${i + 1}]`).val();
            var list = {
                name: name,
                size: size,
                num: num,
                remark: remark
            }
            deplete.push(list)
        }
        var app_access = 'qSoiKwpWVge4TkaryH6MKvOdceGt7ZMaF20g8H0cnXI';
        var outTypeObj = $('input[name=outTypes]'), outTypes = [];
        for (var k in outTypeObj) {
            if (outTypeObj[k].checked) {
                outTypes.push(outTypeObj[k].value);
            }
        }
        var cateObj = $('input[name=cate]'), cate = 0;
        for (var k2 in cateObj) {
            if (cateObj[k2].checked) {
                cate = cateObj[k2].value;
            }
        }
        var isRob = $("input[name=isRob]:checked").val();
        //   var level = $("[name=level]").val();
        var isFabric = $("input[name=isFabric]:checked").val();
        if (!cate) {
            getAppErrMsg('订单类型必选！', '', 1000);
            return
        }
        if (outTypes == []) {
            getAppErrMsg('外发类型必选！', '', 1000);
            return
        }
        var name = {
            app_access: {name: 'app_access', value: app_access},
            token: {name: 'token', value: token},
            styleNo: {name: '款号', value: styleNo},
            styleName: {name: '款式名称', value: styleName},
            name: {name: '产品名称', value: names},
            num: {name: '产品数量', value: numss},
            //      level: { name: '产品数量', value: level },
            money: {name: '金额', value: money},
            bond: {name: '保证金', value: bond},
            scence: {name: '适用场合', value: scence},
            material: {name: '产品材质', value: material},
            tech: {name: '工艺要求', value: tech},
            orderType: {name: '产品类型', value: orderType},
            style: {name: '产品风格', value: style},
            design: {name: '产品款式', value: design},
            detail: {name: '货单描述', value: detail},
            period: {name: '交货时间', value: period},
            proType: {name: '外发要求', value: proType},
            region: {name: '外发范围', value: region},
            proWay: {name: '生产要求', value: proWay},
            img: {name: '主图', value: file_img},
            sizelist: {name: '尺寸颜色', value: sizelist},
            stuff: {name: '面辅料成分/缩率', value: stuff},
            deplete: {name: '面辅料单耗', value: deplete},
            cate: {name: 'cate', value: cate},
            outTypes: {name: 'outTypes', value: outTypes},
            isRob: {name: 'isRob', value: isRob},
            isFabric: {name: 'isFabric', value: isFabric}
        };
        var data = {};
        try {
            Object.keys(name).forEach(function (k) {
                if (!name[k]['value'] || name[k]['value'] === '' || name[k]['value'] === undefined) {
                    throw new Error(name[k]['name'] + '不能为空')
                }

                data[k] = name[k]['value']
            });
            if (isRob == '1' && bond <= 0) {
                alertMsg("保证金必须大于0");
                return;
            }
            if (isRob == '2' && bond != 0) {
                alertMsg("普通单,保证金只能为0")
                return;
            }
            /*
            if(level==0){
                alertMsg("要求工厂等级必须选择")
                return;
            }*/

        } catch (e) {
            alertMsg(e.message)
            return
        }
        data.imgDetails = order.getImgDetails();
        data.orderID = $('#orderID').val();
        data.sizelist = order.tag.getDataJson();
        data.costlist = order.costlist.getDataJson();
        data.status = $('[name=status]:checked').val();

        $.ajax({
            url: '/api/home/release/order',
            type: 'post',
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: "application/json",
            success: function (result) {
//                console.log(result); return;
                if (result.code != 200) {
                    alertMsg(result.msg);
                    return;
                }
                var nextSubmit, url = '';
                nextSubmit = $('#nextSubmit').val();
                if (nextSubmit == 0) {
                    url = 'order/contract.html';
                } else {
                    url = 'order/fabric.html';
                }
                alertMsg('订单内容设置成功！');
                setTimeout(function () {
                    window.location.href = url + '?id=' + result.data.id + '&nextSubmit=' + nextSubmit;
                }, 1000)
            }
        });
    }

    /**
     * 初始化
     * */
    (function () {
        getCates();
        getOutTypes();
    })();

    /**
     * 获取订单发类型
     * */
    function getCates() {
        var userInfo = cacheGet('userInfo');
        if (userInfo == null || userInfo.token == 'undefined') {
            getErrMsg('没有登录！', '');
            return;
        }
        var data = {
            app_access: app_access,
            token: userInfo.token,
            type: userInfo.type,
            cate: userInfo.cate
        };
        $.ajax({
            url: getDomain() + 'release/cates',
            type: 'post',
            data: data,
            success: function (res) {
                //console.log(res); return;
                if (res.code != 0) {
                    console.log(res.msg);
                    return;
                }
                var i, h = '', h2 = '', data = res.data;
                h += '订单类型：';
                h += '<div style="height:10px;"></div>';
                for (i = 0; i < data.length; i++) {
                    h += '<label>';
                    h += '<input type="radio" name="cate" value="' + data[i].id + '">';
                    h += data[i].name + '</label> &nbsp; &nbsp;';
                    if ((i * 1 + 1) % 4 == 0) {
                        h += '<div style="height:10px;"></div>';
                    }
                }
                h += '<br><br>';
                $('#catelist').html(h);
            },
            error: function () {
                console.log('操作失败！');
                return;
            }
        });
    }

    /**
     * 获取外发类型
     * */
    function getOutTypes() {
        var userInfo = cacheGet('userInfo');
        if (userInfo == null || userInfo.token == 'undefined') {
            getErrMsg('没有登录！', '');
            return;
        }
        var data = {
            app_access: app_access,
            token: userInfo.token,
            type: userInfo.type,
            cate: userInfo.cate
        };
        $.ajax({
            url: getDomain() + 'release/outtypes',
            type: 'post',
            data: data,
            success: function (res) {
                //console.log(res); return;
                if (res.code != 0) {
                    console.log(res.msg);
                    return;
                }
                var i, h = '', h2 = '', data = res.data;
                h += '外发类型：';
                h += '<div style="height:5px;"></div>';
                for (i = 0; i < data.length; i++) {
                    h += '<label>';
                    h += '<input type="checkbox" name="outTypes" value="' + data[i].id + '">';
                    h += data[i].name + '</label> &nbsp; &nbsp;';
                    if ((i * 1 + 1) % 4 == 0) {
                        h += '<div style="height:10px;"></div>';
                    }
                }
                $('#outType').html(h);
                order.Create();
            },
            error: function () {
                console.log('操作失败！');
                return;
            }
        });
    }

    /**
     * 设置下一页按钮
     * 原料面料：0不提供，1提供
     * */
    function setSubmit(v) {
        if (v == 0) {
            $('.mianliaoDiv').hide();
        } else {
            $('.mianliaoDiv').show();
        }
        /*
        var btn, urlVal, h = '', nextSubmit, zhiyin = '';
        if (v == 0) {
            btn = '设置订单合同';
            urlVal = 0;
            zhiyin += '<button class="btnCurr">订单资料</button>';
            zhiyin += '--';
            zhiyin += '<button>订单合同</button>';
        } else {
            btn = '设置原料面料';
            urlVal = 1;
            zhiyin += '<button class="btnCurr">订单资料</button>';
            zhiyin += '--';
            zhiyin += '<button>面料清单</button>';
            zhiyin += '--';
            zhiyin += '<button>订单合同</button>';
        }
        h += '<button onclick="setOrderAdd()">' + btn + '</button>';
        h += '<input type="hidden" id="nextSubmit" value="' + urlVal + '">';
        $('#zhiyin').html(zhiyin);
        $('#addOrderSubmit').html(h);*/
    }

    var oldbond = 0;

    function selectIsRob(val) {
        if (val == '1') {
            $('.bondTr').show();
            $('[name=bond]').val(oldbond);
        } else {
            $('.bondTr').hide();
            oldbond = $('[name=bond]').val();
            $('[name=bond]').val(0);
        }
    }


</script>
<style>
    #levelselect {
        margin-left: 15px;
        background: none;
        text-align: center;
    }

    #levelselect option {
        color: #333;
        font-size: 14px;
    }
</style>

<script src="../datepicker/jquery-ui.min.js"></script>
<script>
    $('.regInput').datepicker({
        dateFormat: "yy-mm-dd",
        dayNamesMin: ["一", "二", "三", "四", "五", "六", "日"],
        monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        changeMonth: true,
        changeYear: true,
        firstDay: 0,
        prevText: '上月',
        nextText: '下月'
    });
</script>
</html>